﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}

<div class="container">
    <div class="row">
        <div class="col-md-3 btn btn-default showModal1">
            空白模态框
        </div>
        <div class="col-md-3 btn btn-default showModal2">
            简单模态框
        </div>
        <div class="col-md-3 btn btn-default showModal3">
            复杂模态框
        </div>
        <div class="col-md-3 btn btn-default showModal4">
            模态框事件
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 btn btn-default showAlert1">
            空白消息框
        </div>
        <div class="col-md-3 btn btn-default showAlert2">
            简单消息框
        </div>
        <div class="col-md-3 btn btn-default showAlert3">
            复杂消息框
        </div>
        <div class="col-md-3 btn btn-default showAlert4">
            消息框事件
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 btn btn-default showConfirm1">
            空白对话框
        </div>
        <div class="col-md-3 btn btn-default showConfirm2">
            简单对话框
        </div>
        <div class="col-md-3 btn btn-default showConfirm3">
            复杂对话框
        </div>
        <div class="col-md-3 btn btn-default showConfirm4">
            对话框事件
        </div>
    </div>
</div>

@section scripts{
    <script type="text/javascript">
        $(function () {
            $(".showModal1").click(function () {
                $.bootstrap.modal({
                    title: "标题",
                    page: {
                        url: "/Admin/ArticleType/Insert"
                    }
                });
            });
            $(".showModal2").click(function () {
                $.bootstrap.modal({
                    title: "标题",
                    content: {
                        content: "正文"
                    }
                });
            });
            $(".showModal3").click(function () {
                $.bootstrap.modal({
                    title: "<h4>标题</h4>",
                    content: {
                        content: "<a href='#' class='fa fa-edit'>正文</a>",
                        footer: "模态框说明"
                    }
                });
            });
            $(".showModal4").click(function () {
                $.bootstrap.modal({
                    events: {
                        closing: function () {
                            return confirm('确定要关闭？');
                        },
                        closed: function () {
                            console.log("您关闭了");
                        }
                    }
                });
            });
            $(".showAlert1").click(function () {
                $.bootstrap.alert();
            });
            $(".showAlert2").click(function () {
                $.bootstrap.alert({
                    type: "success",
                    title: "~~~///(^v^)\\\~~~，您的操作成功啦"

                });
            });
            $(".showAlert3").click(function () {
                $.bootstrap.alert({
                    type: "error",
                    title: "(T_T)，您的操作出错了！",
                    content: "您忘记关注我啦，快点击<a href='http://www.xiecan.cc' target='_blank'>这里</a>进行关注吧"
                });
            });
            $(".showAlert4").click(function () {
                $.bootstrap.alert({
                    events: {
                        closing: function () {
                            return confirm('确定要关闭？');
                        }
                    }
                });
            });
            $(".showConfirm1").click(function () {
                $.bootstrap.confirm({
                    events: {
                        closed: function (result) {
                            console.log(result);
                        }
                    }
                });
            });
            $(".showConfirm2").click(function () {
                $.bootstrap.confirm({
                    title: "<h4>确定要删除？</h4>",
                    events: {
                        closed: function (result) {
                            if (result == true) {
                                console.log("您确定了删除！");
                            } else {
                                console.log("您取消了删除！");
                            }
                        }
                    }
                });
            });
            $(".showConfirm3").click(function () {
                $.bootstrap.confirm({
                    title: "<h4>确定要删除？</h4>",
                    content: "<i class='text-danger'>这条数据非常重要，千万不要删除啊！</i>",
                    events: {
                        closed: function (result) {
                            if (result == true) {
                                console.log("您确定了删除！");
                            } else {
                                console.log("您取消了删除！");
                            }
                        }
                    }
                });
            });
            $(".showConfirm4").click(function () {
                $.bootstrap.confirm({
                    title: "<h4>确定要删除？</h4>",
                    content: "<i class='text-danger'>这条数据非常重要，千万不要删除啊！</i>",
                    events: {
                        closed: function (result) {
                            if (result == true) {
                                console.log("您确定了删除！");
                            } else {
                                console.log("您取消了删除！");
                            }
                        }
                    }
                });
            });
        })
    </script>
}